<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件处理</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click="add(10, 2, $event)"> {{count}} </button>
    <input type="text" @keyup.enter="handleKeyup">
    <div @click="handleDivOuterClick">
      <div @click.stop="handleDivInnerClick">
        <button @click="handleButtonClick">click</button>
      </div>
    </div>
    <div>
      <a href="http://www.baidu.com" @click.prevent.stop="handleAnchorClick">百度</a>
    </div>
    <div
      @click.self="handleDiv2Click"
      style="width: 200px; height: 200px; background-color: red;"
    >
      <div
        @click="handleDiv1Click"
        style="width: 100px; height: 100px; background-color: yellow;"
      >
      </div>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        count: 0,
      },
      methods: {
        add(num, num2, e) {
          this.count += num * num2
          console.log(e)
        },
        handleKeyup(e) {
          console.log('enter')
          // if (e.keyCode === 13) {
          //   console.log('enter')
          // }
        },
        handleButtonClick() {
          console.log('button')
        },
        handleDivInnerClick() {
          console.log('div inner')
        },
        handleDivOuterClick() {
          console.log('div outer')
        },
        handleAnchorClick() {
          console.log('a has clicked.')
        },
        handleDiv2Click() {
          console.log('handleDiv2Click')
        },
        handleDiv1Click() {
          console.log('handleDiv1Click')
        }
      },
    })
  </script>
</body>
</html>